<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
</head>
<style>
    /* 标签选择器 */
    ul {
        list-style-type: square;
    }

    /* 类选择器 */
    .selected {
        background-color: #ecc;
    }

    /* ID选择器 */
    #no6-item {
        color: pink;
    }

    /* 通用选择器 */
    * {
        margin: 20px;
        padding: 10px;
    }

    p {
        border: 1px red solid;
    }

    /* 属性选择器 */
    /* |  ~存在判断 */
    /* ^开头 $结尾 子串匹配*/
    [title$='5'] {
        background-color: blue;
    }

    [title~='3'] {
        background-color: yellow;
    }

    /* 关系选择器 */
    div>p {
        color: red;
    }
    h1 ~ p{
        color: blue;
    }

     /* 伪元素选择器 */
     p::first-letter {
        font-size: 2em;
     }
     p::first-line {
        color: red;
     }
</style>
<body>
    <h3>《天龙八部》片段</h3>
    <p>眼见那少年与中年汉子已拆到七十余招，剑招上越来越惊险，兀自未分胜败，突然那中年汉子一剑挥出，似是用力过巨，身子微微一晃。西边宾客中忽有一位白衣青年“嗤”的一笑，他随即知道失态，伸手按住了口。</p>
    <ul>
        <li title="项目 1">项目1</li>
        <li title="项目 2" class="selected">项目2</li>
        <li title="项目 3">项目3</li>
        <li title="项目 4">项目4</li>
        <li title="项目 5">项目5</li>
        <li title="项目 6" id="no6-item">项目6</li>
    </ul>
    <h1>关</h1>
    <div>
        <p>系</p>
        <p>选</p>
        <div>
            <p>择</p>
        </div>
    </div>
    <p>器</p>
</body>

</html>